<template>
  <div class="menu-wrapper">
    <el-anchor :offset="70">
      <el-anchor-link 
      :key="index" @click="handleSelect(`#temp${menu.id}`)"
      v-for="(menu, index) in menus">
        <div class="title-content">
          <SvgIcon class="x16" :name="menu.icon"></SvgIcon>
          <span>{{ menu.name }}</span>
        </div>
      </el-anchor-link>
    </el-anchor>
  </div>
</template>
<script setup lang="ts">
import { type MenuItem } from '@/management/utils/types/formsTypes'
import SvgIcon from '@common/SvgIcon/index.vue'

withDefaults(
  defineProps<{
    menus: Array<MenuItem>
  }>(),
  {
    menus: () => []
  }
)

// const emit = defineEmits(['select'])
const handleSelect = (target: string) => {
  const element = document.querySelector(target);
  console.log(element);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

</script>

<style lang="scss" scoped>
.menu-wrapper {
  width: 200px;
  min-height: 400px;
  height: 100%;
  position: absolute;
  top: 1px;
  bottom: 0px;
  z-index: 999;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  border-right: 1px solid #f6f7f9;
  padding-right: 10px;
}
:deep(.el-anchor__item) {
  // height: 36px;
  margin-top: 5px;
  border-radius: 6px;
}
:deep(.el-anchor__marker) {
  display: none;
}
:deep(.el-anchor__link) {
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
}
:deep(.el-anchor__link.is-active) {
  background: #DFF0FF 100%;
}
</style>
